<template>
	<view class="container">
		<view class="group-box">
			<view class="intro-box">
				<view class="left">
					<view class="logo">
						<image mode="widthFix" :src="$api.loadFile(model.avatar)"></image>
					</view>
					<view class="info">
						<text class="title">{{model.title}}</text>
						<text class="text">{{model.favoriteCount}}人关注</text>
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="addFavorite">
						<text class="icon iconfont icon-like-full"></text>
						<text class="text" v-if="!isFavorite">关注</text>
						<text class="text" v-else>已关注</text>
					</view>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="detail-box">
				<view class="list-box">
					<view class="title">店铺类型</view>
					<view class="remark">{{model.storeTitle}}</view>
				</view>
				<view class="list-box">
					<view class="title">店铺类别</view>
					<view class="remark">{{model.categoryTitle}}</view>
				</view>
				<view class="list-box">
					<view class="title">累积评价</view>
					<view class="remark">
						<text class="label">{{model.evaluateCount}} 次</text>
					</view>
				</view>
				<!--view class="list-box">
					<view class="title">物流评价</view>
					<view class="remark">
						<text class="label">8.70分</text>
						<text class="label">中</text>
					</view>
				</view-->
			</view>
		</view>
		<view class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">店铺地址</text>
					<text class="remark">{{model.address}}</text>
				</view>
				<view class="list-box">
					<text class="title">店铺简介</text>
					<text class="remark">{{model.intro}}</text>
				</view>
				<view class="list-box">
					<text class="title">开店时间</text>
					<text class="remark">{{model.addTime}}</text>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="foot-btn">
				<navigator :url="'index?id='+model.id">查看店铺商品</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFavorite: false, //店铺收藏
				model: {}
			}
		},
		methods: {
			//页面初始化
			async initData(id) {
				let _this = this;
				//加载详情
				await _this.$api.request({
					url: `/client/merchant/${id}`,
					loading: true,
				}).then(res => {
					//console.log(res.data)
					_this.model = res.data;
				}).catch(err => {
					console.log(err);
				});
				//加载店铺收藏信息
				await _this.$api.request({
					url: `/account/merchant/favorite/${_this.model.id}`,
				}).then(res=>{
					_this.isFavorite = true;
				}).catch(err=>{});
			},
			//添加/取消店铺收藏
			addFavorite() {
				let _this = this;
				if(!_this.isFavorite) {
					_this.$api.request({
						url: `/account/merchant/favorite/${_this.model.id}`,
						method: 'post',
					}).then(res=>{
						_this.isFavorite = true;
					});
				}else{
					_this.$api.request({
						url: `/account/merchant/favorite/${_this.model.id}`,
						method: 'delete',
					}).then(res=>{
						_this.isFavorite = false;
					});
				}
			},
		},
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.intro-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 24rpx;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;
		.left{
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			.logo{
				flex-shrink: 0;
				margin-right: 24rpx;
				width: 98rpx;
				height: 98rpx;
				border: 2rpx solid #ebebeb;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.info{
				position: relative;
				overflow: hidden;
				.title{
					display: block;
					width: 100%;
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 56rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.text{
					display: block;
					width: 100%;
					color: #555;
					font-size: 20rpx;
					line-height: 42rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
		.right{
			flex-shrink: 0;
			margin-left: 40rpx;
			.btn{
				padding: 0 20rpx;
				color: #fff;
				background: #f00000;
				height: 48rpx;
				border-radius: 24rpx;
				overflow: hidden;
				.icon{
					margin-right: 10rpx;
					font-size: 22rpx;
					line-height: 48rpx;
				}
				.text{
					font-size: 22rpx;
					line-height: 48rpx;
				}
			}
		}
	}
	.detail-box{
		margin: 0;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;
		.list-box{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			line-height: 40rpx;
			padding: 12rpx 0;
			.title{
				flex-shrink: 0;
				width: 20%;
				color: #797979;
				font-size: 26rpx;
			}
			.remark{
				flex-grow: 1;
				color: #555;
				font-size: 26rpx;
				.label{
					display: inline-block;
					width: 20%;
					padding-right: 12rpx;
					color: #f0250f;
				}
			}
		}
	}
	.foot-btn{
		color: #fa436a;
		font-size: 28rpx;
		line-height: 86rpx;
		text-align: center;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #fff;
	}
</style>
